<template>
    <div id="login-box" @keydown.enter="login()">
        <v-overlay :value="overlay" absolute>
            <v-progress-circular indeterminate size="50"></v-progress-circular>
        </v-overlay>
        <v-form ref="form">
            <v-container fluid>
                <v-row>
                    <v-col>
                        <v-text-field
                                ref="email"
                                label="邮箱"
                                v-model="email"
                                :rules="[emailRule]"
                        >
                        </v-text-field>
                    </v-col>
                </v-row>
                <my-password-input :password.sync="password"></my-password-input>
                <v-row>
                    <v-col cols="7">
                        <v-text-field
                                label="验证码"
                                v-model="verification"
                                :rules="[verificationRule]"
                        >
                        </v-text-field>
                    </v-col>
                    <v-col cols="5">
                        <v-btn
                                id="codeBtn"
                                @click="getCode"
                                class="mt-3"
                                color="warning"
                                outlined
                                block
                                :loading="codeBtn.loading"
                                :disabled="!codeBtn.flag"
                        >
                            {{codeBtn.text}}
                        </v-btn>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col>
                        <v-btn color="primary" block @click="login()">
                            登录
                        </v-btn>
                    </v-col>
                </v-row>
                <v-checkbox
                        v-model="remember"
                        hide-details
                >
                    <template v-slot:label>
                        <span style="color: #2e2b2b; font-weight: 500">七天内免登录</span>
                    </template>
                </v-checkbox>
            </v-container>
        </v-form>
    </div>
</template>

<script>
    import {verificationRule, passwordRule, emailRule} from "../../util/rule"
    import MyPasswordInput from "../common/MyPasswordInput";
    import axios from 'axios'
    export default {
        name: "LoginBox",
        components: {MyPasswordInput},
        data() {
            return {
                email: '',
                password: '',
                verification: '',
                remember: false,
                codeBtn: {
                    flag: true,
                    loading: false,
                    text: '获取验证码'
                },
                overlay: false,
                verificationRule,
                passwordRule,
                emailRule
            }
        },
        methods: {
            login() {
                if(this.$refs.form.validate()) {
                    let _this = this;
                    _this.overlay = true;
                    let formData = new FormData();
                    formData.set("email", _this.email);
                    formData.set("password", _this.password);
                    formData.set("verification", _this.verification);
                    formData.set("remember", _this.remember)
                    _this._post({
                        url: 'login',
                        data: formData
                    }).then((rsp) => {
                        let code = rsp.data.code;
                        sessionStorage.clear();
                        if (code === "00000") {
                            // 登录成功
                            if (rsp.data.object.role === "ROLE_user") {
                                sessionStorage.setItem("user", rsp.data.object.username);
                                _this.$router.push("/disk/all?path=/");
                            } else {
                                sessionStorage.setItem("admin", rsp.data.object.username);
                                _this.$router.push("/admin")
                            }

                            // 在生产环境中的测试 production
                            if(process.env.NODE_ENV === 'production') {
                                _this.saveLoginLog();
                            }
                        } else {
                            // 登录失败
                            _this.$error({message: rsp.data.msg})
                        }
                    }).catch((error) => {
                        console.log(error)
                        _this.$error({message: '服务器繁忙'});
                    }).finally(() => {
                        _this.overlay = false;
                    })
                }
            },
            saveLoginLog() {
                let userAgent = navigator.userAgent;
                let type;
                if (/(iPhone|iPad|iPod|iOS)/i.test(userAgent)) {
                    type = "IOS";
                } else if (/(Android)/i.test(userAgent)) {
                    type = "ANDROID";
                } else {
                    type = "PC";
                }
                let _this = this;
                _this._post({
                    url: 'user/login-log?type=' +  type
                })
            },
            getCode() {
                let _this = this;
                if (_this.$refs['email'].validate()) {
                    _this.codeBtn.loading = true;
                    _this._get({
                        url: 'open/get-verification-code',
                        params: {
                            email: _this.email
                        }
                    }).then((rsp) => {
                        let code = rsp.data.code;
                        if (code === '00000') {
                            _this.$success({message: '验证码发送成功'});
                            // 调用按钮倒计时
                            _this.countDown();
                        } else {
                            _this.$error({message: rsp.data.msg});
                        }
                    }).catch((error) => {
                        console.log(error)
                        _this.$error({message: '服务器繁忙'});
                    }).finally(() => {
                        _this.codeBtn.loading = false
                    })
                }
            },
            countDown() {
                let _this = this;
                // 禁用codeBtn
                _this.codeBtn.flag = false;
                _this.codeBtn.text = 60;
                // 倒计时任务
                let interval = setInterval(() => {
                    if (_this.codeBtn.text === 1) {
                        _this.codeBtn.text = '获取验证码';
                        _this.codeBtn.flag = true;
                        clearInterval(interval);
                        return;
                    }
                    _this.codeBtn.text--
                }, 1000)
            }
        }
    }
</script>

<style scoped>
    #login-box {
        width: 350px;
        background-color: rgba(255, 255, 255, 0.8);
        position: fixed;
        right: 5%;
        top: 20%;
    }
</style>